<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全图运动 - 资讯</title>
    <link rel="stylesheet" href="normalize.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* ===== 全局样式 - 严格遵循设计规范 ===== */
      html,
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                     "PingFang SC", "Hiragino Sans GB",
                     "Microsoft YaHei", sans-serif;
        background-color: #faf9f5;
        color: #333333;
        font-size: 14px;
        line-height: 1.4;
        height: 100%;
      }

      /* ===== 页面容器 ===== */
      .container {
        max-width: 480px;
        margin: 0 auto;
        background-color: #fff;
        min-height: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      /* ===== 顶部导航栏 ===== */
      .topNav {
        background-color: #ffffff;
        border-bottom: 1px solid #e0e0e0;
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .topNav .left {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .topNav .backBtn {
        font-size: 20px;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
      }

      .topNav .pageTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }


      /* ===== 内容区域 ===== */
      .contentArea {
        flex: 1;
        overflow-y: auto;
      }

      /* ===== 资讯列表 ===== */
      .newsList {
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* ===== 资讯卡片 ===== */
      .newsCard {
        background-color: white;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #e0e0e0;
        transition: background-color 0.3s;
      }

      .newsCard:hover {
        background-color: #fafafa;
      }

      .newsCard:last-child {
        border-bottom: none;
      }

      .newsCard .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
      }

      .newsCard .title {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .newsCard .meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .newsCard .category {
        font-size: 12px;
        color: #666;
      }

      .newsCard .timestamp {
        font-size: 11px;
        color: #999;
      }

      .newsCard .thumbnail {
        flex-shrink: 0;
        width: 120px;
        height: 90px;
        background-color: #e8e8e8;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 11px;
        position: relative;
      }

      .newsCard .thumbnail::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 1px;
        background: linear-gradient(to right, transparent, #ccc, transparent);
      }

      .newsCard .thumbnail::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 70%;
        background: linear-gradient(to bottom, transparent, #ccc, transparent);
      }

      /* 占位符文字 */
      .placeholderText {
        position: relative;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航栏 -->
      <div class="topNav">
        <div class="left">
          <div class="backBtn">‹</div>
          <div class="pageTitle">资讯</div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="contentArea">
        <div class="newsList">
          <!-- 资讯卡片 1 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">中国足球,能从"村超"里学点什么</div>
              <div class="meta">
                <div class="category">村超</div>
                <div class="timestamp">2023.09.25 19:53</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 2 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">智慧体育 | 苹果计划通过混合现实头盔颅覆体育观赏方式</div>
              <div class="meta">
                <div class="category">数智体育|数智场馆</div>
                <div class="timestamp">2023.07.06 11:48</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 3 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">头条 | 得了便宜卖乖？偷袭梅西球迷身份被曝，叶楣安保太烂</div>
              <div class="meta">
                <div class="category">数智体育|数智场馆</div>
                <div class="timestamp">2023.07.06 11:46</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 4 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">智慧体育 | 马德里竞技将5G技术和虚拟现实相结合 开发沉浸式...</div>
              <div class="meta">
                <div class="category">数智体育|数智场馆</div>
                <div class="timestamp">2023.07.06 11:34</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 5 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">别再叫飞盘「中产运动」了！</div>
              <div class="meta">
                <div class="category">体育产业生态圈</div>
                <div class="timestamp">2023.07.05 18:23</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 6 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">2023年全国青少年体育工作会议在济南召开</div>
              <div class="meta">
                <div class="category">体育总局青少司</div>
                <div class="timestamp">2023.07.04 16:12</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 7 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">体育强国建设纲要实施进展情况发布</div>
              <div class="meta">
                <div class="category">国家体育总局</div>
                <div class="timestamp">2023.07.03 14:30</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>

          <!-- 资讯卡片 8 -->
          <div class="newsCard">
            <div class="info">
              <div class="title">科技赋能体育,打造智慧场馆新标杆</div>
              <div class="meta">
                <div class="category">数智体育|数智场馆</div>
                <div class="timestamp">2023.07.02 10:15</div>
              </div>
            </div>
            <div class="thumbnail">
              <span class="placeholderText">图片</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
